;<template>
  <div>
    <el-container>
      <el-aside class="head" width="900px">
        <el-card>
          <el-row>
            <el-form :inline="true">
              <el-form-item v-if="flagClass">
                <template>
                  <el-select
                    v-model="choooseClassType"
                    @change="saveClassType($event)"
                  >
                    <el-option v-for="item in searchClassType" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                  <el-select
                    v-if="searchTypeShow"
                    v-model="Type"
                    placeholder="请选择查询依据"
                    style="width: 160px"
                    @change="saveType($event)"
                  >
                    <el-option v-for="item in searchType" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </template>
              </el-form-item>
              <el-form-item v-if="openingWeekShow">
                <el-input v-model="openingWeek" style="width: 140px" clearable="true" placeholder="输入开班星期" />
              </el-form-item>
              <el-form-item v-if="flagClass">
                <el-button type="primary" icon="el-icon-search" @click="getClassInfo" />
              </el-form-item>
              <el-form-item v-if="flagStudent">
                <el-button type="primary" icon="el-icon-arrow-left" size="small" @click="getClassInfoFlag" />
              </el-form-item>
            </el-form>
          </el-row>
        </el-card>
      </el-aside>
      <el-main class="footer">
        <el-button type="text" class="button" @click="downloadInfo">导出Excel</el-button>
      </el-main>
    </el-container>
    <el-container class="container">
      <el-main>
        <!--        <el-card class="card">-->
        <el-table v-if="flagClass" :data="tableDataClass" size="small" border stripe	style="width: 100%">
          <el-table-column prop="className" label="班级名称" align="center">
            <template slot-scope="scope">
              {{ scope.row.className ? scope.row.className :'暂无' }}
            </template>
          </el-table-column>
          <el-table-column prop="classWeekday" label="上课时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.classWeekday&&scope.row.classStartNum&&scope.row.classEndNum?'周'+scope.row.classWeekday+' '+'（第'+scope.row.classStartNum+'节至第'+scope.row.classEndNum+'节）':'暂无数据' }}
            </template>
          </el-table-column>
          <el-table-column prop="openingWeek" label="开班星期" align="center">
            <template slot-scope="scope">
              {{ scope.row.openingWeek ? scope.row.openingWeek :'暂无' }}
            </template>
          </el-table-column>
          <el-table-column prop="classState" label="开班状态" align="center">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.classState === 0 ? 'info' : scope.row.classState=== 1 ? '':scope.row.classState === 2 ?'success':''"
              >
                {{ scope.row.classState===0 ?'未开班': scope.row.classState===2?'已开班' :'暂无' }}
              </el-tag>
            </template>

          </el-table-column>
          <el-table-column prop="currentNumber" label="班级人数" align="center">
            <template slot-scope="scope">
              {{ scope.row.currentNumber ? scope.row.currentNumber :'暂无' }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template slot-scope="scope">
              <!--                  <el-button type="primary" icon="el-icon-edit" @click="handleClick(scope.$index)"></el-button>-->
              <el-button size="small" type="text" @click="getStudentInfo(scope.row.cid)">学生查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="flagClass"
          :current-page="page.pageNum"
          :total="page.totalSize"
          layout="total,prev, pager, next, jumper"
          style="margin-top: 10px;float: right;margin-bottom: 10px"
          @current-change="handleCurrentChange"
        />
        <el-table v-if="flagStudent" :data="tableDataStudent" size="small" border stripe style="width: 100%">
          <el-table-column prop="student_id" label="学号" width="150px" align="center">
            <template slot-scope="scope">
              {{ scope.row.student_id ? scope.row.student_id :'暂无' }}
            </template>
          </el-table-column>
          <el-table-column prop="child_name" label="学生姓名" width="150px" align="center">
            <template slot-scope="scope">
              {{ scope.row.child_name ? scope.row.child_name :'暂无' }}
            </template>
          </el-table-column>
          <el-table-column prop="gender" label="性别" width="100px" align="center">
            <template slot-scope="scope">
              {{ scope.row.gender ? scope.row.gender :'暂无' }}
            </template>
          </el-table-column>
          <el-table-column prop="entry_grade" label="入学年级" align="center">
            <template slot-scope="scope">
              {{ scope.row.entry_grade ? scope.row.entry_grade :'暂无' }}
            </template>
          </el-table-column>
          <el-table-column prop="entry_year" label="入学年份" align="center">
            <template slot-scope="scope">
              {{ scope.row.entry_year ? scope.row.entry_year :'暂无' }}
            </template>
          </el-table-column>
          <el-table-column prop="parent_name" label="家长姓名" align="center">
            <template slot-scope="scope">
              {{ scope.row.parent_name ? scope.row.parent_name :'暂无' }}
            </template>
          </el-table-column>
          <el-table-column prop="parent_phone_number" label="家长电话" align="center">
            <template slot-scope="scope">
              {{ scope.row.parent_phone_number ? scope.row.parent_phone_number :'暂无' }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template slot-scope="scope">
              <!--                  <el-button type="primary" icon="el-icon-edit" @click="handleClick(scope.$index)"></el-button>-->
              <el-button size="small" type="text" @click="uploadWork(scope.row.sid)">上传作品</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="flagStudent"
          :current-page="pageStudent.pageNumStudent"
          :total="pageStudent.totalSizeStudent"
          layout="total,prev, pager, next, jumper"
          style="margin-top: 10px;float: right;margin-bottom: 10px"
          @current-change="handleCurrentChangeStudent"
        />
        <!--        </el-card>-->
        <el-dialog
          title="上传班级作品"
          :visible.sync="dialogFormVisible"
          width="50%"
        >
          <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 500px " label-position="left">
            <el-form-item label="等级" prop="grade">
              <el-select v-model.trim="ruleForm.grade">
                <el-option
                  v-for="it in gradeOptions"
                  :key="it.value"
                  :label="it.label"
                  :value="it.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="文件" prop="file">
              <el-upload
                ref="upload"
                class="upload-demo"
                action=""
                :http-request="uploadClassWorks"
                :on-remove="handleRemove"
                :on-change="fileChange"
                :limit="1"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :file-list="fileList"
                :auto-upload="false"
              >
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitUpload">上 传</el-button>
          </span>
        </el-dialog>
      </el-main>

    </el-container>
  </div>
</template>

<script>

import { exportClassInfo, SearchClassInfo } from '../../../api/teacher'
import { getTeacherClass } from '../../../api/teacher'
import { exportStudensInfo, exportStudentsInfo, getStudensInfo } from '../../../api/student'
import { uploadFile } from '../../../api/file'
import { uploadWorks } from '../../../api/works'

export default {
  name: 'Class',
  data() {
    return {
      baseUrl: this.global.picBaseUrl,
      gradeOptions: [
        {
          label: '优秀',
          value: 1
        },
        {
          label: '良好',
          value: 2
        },
        {
          label: '中等',
          value: 3
        },
        {
          label: '及格',
          value: 4
        },
        {
          label: '不及格',
          value: 5
        }
      ],
      fileList: [],
      dialogFormVisible: false,
      saveChooseClassTyoe: '2', // 保存选择的班级类型
      choooseClassType: '2',
      chooseType: '2', // 保存查询的方式
      Type: '2',
      searchClassType: [
        {
          id: '1',
          name: '行政班'
        },
        {
          id: '2',
          name: '教学班'
        }
      ],
      searchType: [
        {
          id: '1',
          name: '开班星期'
        },
        {
          id: '2',
          name: '所有'
        }
      ],
      classIdMessage: '',
      page: {
        pageNum: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      pageStudent: {
        pageNumStudent: 1,
        pageSizeStudent: 10,
        totalPageStudent: 0,
        totalSizeStudent: 0
      },
      flagClass: true,
      flagStudent: false,
      isChooseClass: false,
      openingWeek: '',
      exportOpeningWeek: '',
      exportCid: '',
      classId: '',
      classList: [],
      tableDataClass: [],
      tableDataStudent: [],
      openingWeekShow: false,
      searchTypeShow: true,
      ruleForm: {
        grade: 4
      },
      cid: '',
      worksupdate: {
        cid: '',
        sid: '',
        type: 0,
        grade: 0,
        url: '',
        isOnHomePage: false
      }
    }
  },
  created() {
    this.getClass()
  },
  methods: {
    handleCurrentChange(val) {
      this.page.pageNum = val
      console.log(this.chooseType)
      console.log(this.openingWeek)
      this.getClassInfo()
    },
    handleCurrentChangeStudent(val) {
      this.pageStudent.pageNumStudent = val
      this.getStudentInfo()
    },
    getClassInfo() {
      this.flagStudent = false
      this.flagClass = true
      if (this.saveChooseClassTyoe === '1') {
        SearchClassInfo({
          headTeacher: true,
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }).then(res => {
          this.tableDataClass = res.data.list
          this.page = res.data.page
          if (res.data.list[0] === null) {
            this.$message.warning('您不是班主任，暂无相关行政班级！')
          }
          // else {
          //   (
          //     this.$message.success('请求开班信息成功！')
          //   )
          // }
        })
        // .catch(err => {
        //   this.$message.error('请求待开班信息失败！')
        // })
        // 获取行政班开班信息
      } else if (this.saveChooseClassTyoe === '2') {
        if (this.chooseType === '1') {
          if (this.openingWeek === '') {
            alert('请输入开班星期')
          } else {
            SearchClassInfo({
              openingWeek: this.openingWeek,
              pageNum: this.page.pageNum,
              pageSize: this.page.pageSize
            }).then(res => {
              this.tableDataClass = res.data.list
              this.page = res.data.page
              this.exportOpeningWeek = this.openingWeek
              // this.$message.success('请求开班信息成功！')
              if (res.data.list.length === 0) {
                this.$message.warning('该开班星期下暂无班级！')
              }
            })
            // .catch(err => {
            //   this.$message.error('请求待开班信息失败！')
            // })
          }
        } else if (this.chooseType === '2') {
          SearchClassInfo({
            pageNum: this.page.pageNum,
            pageSize: this.page.pageSize
          }).then(res => {
            this.tableDataClass = res.data.list
            this.page = res.data.page
            this.exportOpeningWeek = this.openingWeek
            // this.$message.success('请求开班信息成功！')
            if (res.data.list.length === 0) {
              this.$message.warning('暂无相关班级开班信息！')
            }
          })
          // .catch(err => {
          //   this.$message.error('请求待开班信息失败！')
          // })
        } else {
          alert('请先选择查询依据！')
        }
      }
    },
    getStudentInfo(cid) {
      // if (this.isChooseClass === true) {
      this.openingWeekShow = false
      this.flagClass = false
      this.flagStudent = true
      console.log(cid)
      getStudensInfo({
        cid: cid,
        pageNum: this.pageStudent.pageNumStudent,
        pageSize: this.pageStudent.pageSizeStudent
      }).then(res => {
        this.cid = cid
        this.tableDataStudent = res.data.list
        this.pageStudent.pageNumStudent = res.data.page.pageNum
        this.pageStudent.pageSizeStudent = res.data.page.pageSize
        this.pageStudent.totalPageStudent = res.data.page.totalPage
        this.pageStudent.totalSizeStudent = res.data.page.totalSize
        console.log(this.pageStudent.totalSizeStudent)
        console.log(res.data.list[0] + '!!!!!!')
        this.exportCid = cid
        console.log(this.exportCid)
        // this.$message.success('请求学生信息成功！')
      })
      // .catch(err => {
      //   this.$message.error('请求该班级学员信息失败！')
      // })
      // } else {
      //   alert('请先选择班级！')
      // }
    },
    getClass() {
      getTeacherClass()
        .then(res => {
          this.classList = res.data
          this.tableDataClass = res.data
          // this.$message.success('获取教师任课班级列表成功！')
        })
        .catch(err => {
          // this.$message.error('获取教师任课班级列表失败！')
          this.classIdMessage = '暂无任课班级'
        })
    },
    saveCid(event) {
      this.classId = event
      this.isChooseClass = true
    },
    downloadInfo() {
      if (this.flagClass === true) {
        console.log(this.exportOpeningWeek)

        window.location.href = this.baseUrl + '/class/class-info-excel?openingWeek=' + this.exportOpeningWeek
      } else if (this.flagStudent === true) {
        window.location.href = this.baseUrl + '/student/excel/' + this.exportCid
      }
    },
    saveType(event) {
      this.chooseType = event
      if (this.chooseType === '1') {
        this.openingWeekShow = true
      } else if (this.chooseType === '2') {
        this.openingWeekShow = false
      }
    },
    saveClassType(event) {
      this.saveChooseClassTyoe = event
      if (this.saveChooseClassTyoe === '1') { // 选择查询行政班
        this.searchTypeShow = false
        this.openingWeekShow = false
      } else if (this.saveChooseClassTyoe === '2') { this.searchTypeShow = true }
    },
    getStudentInfoFlag() {
      this.flagClass = false
      this.openingWeekShow = false
      this.flagStudent = true
    },
    getClassInfoFlag() {
      this.flagStudent = false
      this.flagClass = true
    },
    fileChange(file, fileList) {
      this.fileList = fileList
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    uploadWork(sid) {
      this.worksupdate.sid = sid
      this.dialogFormVisible = true
    },
    handleExceed(files, fileList) {
      this.$message.warning(`请逐个上传作品！`)
    },
    // 作品上传
    uploadClassWorks(param) {
      console.log('cid', this.cid)
      const formDate = new window.FormData()
      const fileObj = param.file
      formDate.append('file', fileObj)
      uploadFile(formDate).then(res => {
        console.log('message1', res.data)
        this.worksupdate.url = res.data
        console.log('work', this.worksupdate)
        uploadWorks({
          cid: this.worksupdate.cid,
          sid: this.worksupdate.sid,
          grade: this.worksupdate.grade,
          type: this.worksupdate.type,
          url: this.worksupdate.url,
          isOnHomePage: this.worksupdate.isOnHomePage
        }).then(res => {
          console.log('message2', res)
          this.$message.success('上传作品成功！')
          this.dialogFormVisible = false
        }).catch(err => {
          console.log('err1', err)
          this.$message.error('上传作品失败！')
        })
      }).catch(err => {
        console.log('err2', err)
        this.$message.error('上传作品失败！')
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    // 上传文件前处理
    beforeUpload(file) {
      console.log('file', file)
      if (!file) {
        this.$message.warning('请选择文件！')
        return false
      }
      this.worksupdate.cid = this.cid
      this.worksupdate.grade = this.ruleForm.grade
      // eslint-disable-next-line eqeqeq
      if (file.type.indexOf('image') != -1) {
        this.worksupdate.type = 3
        // eslint-disable-next-line eqeqeq
      } else if (file.type.indexOf('video') != -1) {
        this.worksupdate.type = 2
        // eslint-disable-next-line eqeqeq
      } else if (file.type.indexOf('audio') != -1) {
        this.worksupdate.type = 1
      } else {
        this.$message.warning('暂不支持该文件类型上传')
        return false
      }
    }

  }
}
</script>

<style scoped>

  .container{
    margin-top: -50px;
    margin-left: -20px;
    margin-right: -20px;
  }
</style>
